<template>
    <div>
        <!-- 电影展示组件 start -->
        <div class="film-item" v-for="film in list" :key="film.filmId">
            <div
                class="film-img"
                :style=" `background-image: url(${film.filmImg})` "
                @click="sendDetail(film.filmId)"
            ></div>
            <div class="film-title">{{film.filmName}}</div>
            <div class="film-source">
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img close"></span>
                <span class="star-img close"></span>
                <span class="star-source">{{film.source | getSource}}</span>
            </div>
        </div>
        <!-- 电影展示组件 end -->
    </div>
</template>
<script>
export default {
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    filters: {
        getSource(source) {
            return (source * 1).toFixed(1);
        }
    },
    methods: {
        sendDetail(id) {
            console.log(id);
            this.$root.$emit("update:detail", id, "FilmDetail");
        }
    },
    mounted() {
        // console.log(this.list);
    }
};
</script>
<style lang="less" scoped>
.film-item {
    width: 2.35rem;
    height: 4.55rem;
    display: inline-block;
    margin-left: 0.1rem;
    vertical-align: top;
    > .film-img {
        height: 3.6rem;
        background-color: @gray-light;
        background-repeat: no-repeat;
        background-size: cover;
    }
    > .film-title {
        font-size: 0.26rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0.1rem;
    }
}
</style>